import React, { PureComponent, Fragment } from 'react';
import {
  Form,
  Input,
  Modal,
} from 'antd';

const FormItem = Form.Item;

@Form.create()
class UpdateForm extends PureComponent {
  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  // 表单
  renderContent = () => {
    const { form } = this.props;
    return [
      <FormItem key="amount" {...this.formLayout} label="金额">
        {form.getFieldDecorator('amount', {
          rules: [{ required: true, message: '请输入金额！' }],
        })(<Input type={'Number'} placeholder="请输入金额"/>)}
      </FormItem>,
    ];
  };

  //弹窗
  render() {
    const { handleModalVisible, modalVisible, handleRepay, handleUpTop,type } = this.props;
    //完成
    const handleNext = () => {
      const { form, values } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        const formVals = { ...values, ...fieldsValue };
        if (type === 'compensatory') {
          handleRepay(formVals);
        } else {
          handleUpTop(formVals);
        }
      });
    };
    return (
      <Modal
        width={500}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title={type==='compensatory'?'代偿金额':'充值金额'}
        visible={modalVisible}
        onOk={handleNext}
        onCancel={() => handleModalVisible(false, [])}
      >
        {this.renderContent()}
      </Modal>
    );
  }
}

export default UpdateForm;
